<template>
	<view v-if="show">
		<u-mask :show="show"  z-index="2000">
			<view class="popup-container">
				
				<slot></slot>
				<image class="popup-image" @click="handlePopupImgClick" mode="widthFix" :src="img"></image>
				<view class="checkbox">
					<u-checkbox v-if="da.txt" v-model="checked" name="aaa" size="26" @change="handleChange" active-color="#0da297" label-size="28">
						<text class="checkbox-txt">{{da.txt}}</text>
					</u-checkbox>
				
					<u-count-down font-size="28" bg-color="rgba(255,255,255,0)" color="rgba(255,255,255,0.5)" v-if="da.time>0" ref="uCountDown" @end="handleEnd" :show-hours="false" :show-days="false" :show-minutes="false" :timestamp="da.time"></u-count-down>
				</view>
				<image class="popup-close" @click="handleCloseClick" mode="widthFix" :src="iconClose"></image>
			</view>
		</u-mask>
	</view>
</template>
<script>

export default {
	name: 'CommonPopup',
	data() {
		return {
			iconClose:this.$imgUrl+'index/close1.png',
			checked:false,
			timestamp:3,
		};
	},
	watch: {
		show(newVal) {
			
			if(newVal && this.da.time>0){
				this.$refs.uCountDown.start();
			}
		},
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		img:{
			type: String,
			default: ''
		},
		da:{
			type:Object,
			default: {
				txt:"",
				from:"",
				abc:"",//后端需要
				time:0,
			}
		}
	},
	methods:{
		handlePopupImgClick() {
			this.$emit('img-click');
		},
		handleCloseClick(){
			this.$emit('close');
		},
		handleChange(param){
			let old=this.checked;//保存初始值
			
			let text='';
			if(this.da.from==1){
				text='home';
			}else if(this.da.from==2){
				text='times';
			};
			//调用接口;
			this.$u.api.setPopupCheckbox({
				name:text,
				type:this.da.abc,
			}).then(res=>{
				if(res.result_code!=300){
					//接口请求失败时，选中状态回归初始值并且提示错误信息。
					this.checked=old;
					this.$utils.toast(res.msg);
				};
			}).catch(err=>{
				//选中状态回归初始值
				this.checked=old;
			});
			
		},
		handleEnd(){
			//倒计时结束把弹窗关闭
			this.handleCloseClick();
		}
	}
};
</script>

<style lang="scss" scoped>
	.popup-container{
		position:absolute;
		left:50%;
		top:50%;
		
		transform: translate(-50%,-50%);
	}
	.popup-image{
		width:500rpx;
		height: 600rpx !important;
		display: block;
	}
	.popup-close{
		display: block;
		margin:40rpx auto 0;
		width:40rpx;
		height:40rpx;
		/* opacity: 0.7; */
	}
	.checkbox{
		text-align: center;
		padding-top:20rpx;
	}
	.checkbox-txt{
		color:rgba(255,255,255,0.7);
		font-size: 24rpx;
	}
</style>
